<template>
  <div class="alarmManage-container">
    <div class="topBox">
      <div class="seachBox">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="报警名称：" class="taglong">
            <el-input v-model="formInline.name" placeholder="请输入报警名称" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="指标：">
            <el-select v-model="formInline.quotaId" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item,index) in quotaIdSelectData" :key="index" :label="item.name" :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="searchBut" @click="onSubmit"><i class="iconfont icon-sousuo"></i> 搜索</div>

        </el-form>
      </div>
      <div class="butHandle">
        <el-button type="primary" @click="handleClick()" size="small"><span class="iconfont icon-tianjia"></span>添加报警
        </el-button>
      </div>
    </div>

    <div class="contBox">
      <div v-for="(item, ind) in tableData" :class="['item']" :key="ind">
        <div class="infoList">
          <div class="col">
            <svg-icon icon-class="alarm"/>
            <el-tooltip effect="dark" content="报警名称" placement="top">
              <span>{{ item.name }}</span>
            </el-tooltip>
          </div>
          <div class="col">
            <svg-icon icon-class="threshold"/>
            <el-tooltip effect="dark" content="阈值" placement="top">
              <span>{{ item.operator + item.threshold }}</span>
            </el-tooltip>
          </div>
          <div class="col">
            <svg-icon icon-class="cycle"/>
            <el-tooltip effect="dark" content="沉默周期" placement="top">
              <span>{{ item.cycle }}</span>
            </el-tooltip>
          </div>
          <div class="col">
            <svg-icon icon-class="lv"/>
            <el-tooltip effect="dark" content="报警等级" placement="top">
              <span>{{ item.level }}</span>
            </el-tooltip>
          </div>
          <div class="col">
            <div class="action">
              <i @click="changeItem(item)" class="el-icon-edit"></i>
              <i @click="delItem(item)" class="el-icon-delete"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-if="total <= 0">
        <img src="../../../assets/nodata.png" alt="" width="129">
      </div>

    </div>
    <pagination
      v-show="total>20"
      :total="total"
      :page.sync="formInline.pageNum"
      :limit.sync="formInline.pageSize"
      @pagination="getList" />

    <el-dialog :visible.sync="dialogVisible" width="500px" center @close="resetForm('quota')" >
      <div slot="title" class="dialog-title" >
        {{ title }}
      </div>

      <el-form :rules="rules" :model="form" ref="quota" label-width="100px">
        <el-form-item prop="name" label="报警名称：">
          <el-input style="width:100%" placeholder="请输入报警名称" v-model="form.name" maxlength="20" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="quotaId" label="报警指标：">
          <el-select v-model="form.quotaId" placeholder="请选择报警指标" size="small" >
            <el-option v-for="(item,index) in quotaIdSelectData" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="webHook" label="web hook：" >
          <el-input placeholder="请输入web hook" maxlength="200" v-model="form.webHook" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="报警阈值：" required >
          <div style="display:flex">
            <div style="flex:1">
              <el-form-item prop="operator">
                <el-select v-model="form.operator" placeholder="请选择" size="small" >
                  <el-option label=">" value=">" ></el-option>
                  <el-option label="<" value="<" ></el-option>
                  <el-option label="=" value="=" ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 10px"></div>
            <div style="flex:1">
              <el-form-item prop="threshold">
                <el-input placeholder="请输入报警阀值" v-model.number="form.threshold" maxlength="5" size="small" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="level" label="报警级别：" >
          <el-radio-group v-model="form.level">
            <el-radio :label="1">一般</el-radio>
            <el-radio :label="2">严重</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="沉默周期：" required>
          <div style="display:flex">
            <div style="flex:1">
              <el-form-item prop="cycle">
                <el-input placeholder="请输入沉默周期" v-model.number="form.cycle" maxlength="5" size="small" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" ></el-input>
              </el-form-item>
            </div>
            <div style="width: 20px"></div>
            <div style="flex:1">
              <el-form-item prop="time">
                <el-select v-model="form.time" placeholder="请选择" size="small" >
                  <el-option v-for="(item,index) in timeSelectData" :key="index" :label="item.label" :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="resetForm('quota')" size="small" class="butBox" >取 消 </el-button>
        <el-button type="primary" @click="submitForm('quota')" size="small" class="butBox" style="margin-left: 30px;" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/iot/Table/index.vue'
import { alarm, addAlarm, putAlarm, delAlarm } from '@/api/iot/alarmManage'
import { quota } from '@/api/iot/fingerMark'
import { escape2Html } from '@/utils/ruoyi'

export default {
  name: 'alarmLog',
  components: {
    Table,
  },
  data() {
    return {
      formInline: {
        page: 1,
        pageSize: 20
      },
      total: 1,
      tableData: [],
      title: '添加报警',
      timeSelectData: [
        {
          label: '小时',
          value: 'h'
        },
        {
          label: '分钟',
          value: 'm'
        }
      ],
      quotaIdSelectData: [],
      restKey: 0,
      dialogVisible: false,
      //是否新增
      isAddPut: true,
      form: {
        name: '',
        quotaId: '',
        operator: '',
        threshold: '',
        level: 1,
        cycle: '',
        webHook: '',
        time: ''
      },
      rules: {
        name: [{ required: true, message: '请输入报警名称', trigger: 'blur' }],
        quotaId: [{ required: true, message: '请选择报警指标', trigger: 'change' }],
        webHook: [{ required: false }],
        operator: [
          { required: true, message: '请选择的报警阈值', trigger: 'change' }
        ],
        threshold: [
          { required: true, message: '请选择的报警阈值', trigger: 'change' }
        ],
        level: [{ required: true, message: '请选择报警级别', trigger: 'change' }],
        cycle: [{ required: true, message: '请输入沉默周期', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getList()
    this.getQuotaList()
  },
  methods: {
    //搜索
    onSubmit(refId) {
      this.formInline.page = 1
      this.getList()
    },

    //获取报警列表
    async getList() {
      const data = await alarm({ ...this.formInline })
      console.log(data)
      this.tableData = [...data.rows]
      this.tableData.forEach(e => e.operator = escape2Html(e.operator))
      this.total = data.total
    },

    //获取指标
    async getQuotaList() {
      const data = await quota({
        page: 1,
        pageSize: 1000
      })
      this.quotaIdSelectData = [...data.rows]
    },

    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.formInline.page = val
      this.getList()
    },

    //添加报警提交
    submitForm(refId) {
      this.$refs[refId].validate(async(valid) => {
        if (valid == true) {
          let params = this.form
          if (params.time == 'h') {
            params.cycle = params.cycle * 60
          }
          console.log(params)
          if (this.isAddPut) {
            delete this.form.id
            const data = await addAlarm(params)
          } else {
            const data = await putAlarm(params)
          }
          this.getList()
          this.dialogVisible = false
          this.$refs[refId].resetFields()
        }
      })
    },

    //添加报警
    handleClick() {
      this.dialogVisible = true
      this.isAddPut = true
      this.title = '添加报警'
      this.form.time = 'm'
      this.$nextTick(() => {
        this.$refs['quota'].resetFields()
      })
    },

    //修改报警
    changeItem(item) {
      this.title = '修改报警'
      this.dialogVisible = true
      this.isAddPut = false
      if (item.cycle % 60 == 0) {
        item.time = 'h'
        item.cycle = item.cycle / 60
      } else {
        item.time = 'm'
      }
      this.$nextTick(() => {
        this.form = Object.assign({}, item)
      })
    },

    //删除报警
    async delItem(item) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        const data = await delAlarm(item.id)
        this.getList()
      }).catch((err) => {
        console.log('取消操作！')
      })
    },

    resetForm(refId) {
      this.$refs[refId].resetFields()
      this.dialogVisible = false
    }

  }
}
</script>

<style lang="scss">
.alarmManage {
  &-container {
    .el-input--small .el-input__inner {
      width: 100% !important;
    }

    .el-select--small {
      width: 100%;
    }

    .el-dialog--center .el-dialog__body {
      padding: 25px 30px 30px;
    }

    .taglong .el-form-item__content {
      width: calc(100% - 85px) !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.alarmManage {
  &-container {
    background: #f3f4f7;
    padding: 28px 35px;
    width: 100%;
    height: 100vh;

    .topBox {
      padding: 0 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .butHandle {
        .iconfont {
          margin-right: 5px;
          position: relative;
          top: 1px;
        }
      }
    }

    .seachBox {
      margin-top: 20px;

      .searchBut {
        display: inline-block;
        position: relative;
        width: 89px;
        cursor: pointer;
        height: 36px;
        line-height: 38px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #5584ff;
        border-radius: 4px;
        color: #5584ff;
      }
    }

    .contBox {
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;

      .item {
        width: calc(50% - 14px);
        height: 44px;
        line-height: 44px;
        background: #fff;
        border-radius: 2px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 6px 6px;
        padding: 0 10px;

        .infoList {
          display: flex;
          flex: 1;

          .col {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #20232a;
            .svg-icon {
              font-size: 20px;
            }

            span {
              position: relative;
              left: 8px;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
            }

            .action {
              i {
                cursor: pointer;
                background: #5584FF;
                color: #fff;
                padding: 6px;
                border-radius: 50%;
                font-size: 14px;
              }

              i:last-child {
                background: #f00;
              }
            }

            &:hover {
              //transition: 500ms ease;
              //transform: scale(1.1, 1.1);
            }
          }

          div:last-child {
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }

          .iconfont {
            font-size: 14px;
            margin-right: 10px;
            color: #afb6ca
          }
        }
      }
    }

    .pagination-container{
      background: transparent;
    }

    .butBox {
      width: 80px;
      height: 36px;
      border-radius: 4px;
    }
  }
}
</style>
